<!-- 导入弹窗 -->
<template>
  <el-dialog
    v-model="importVisible"
    :title="`导入${props.title}数据`"
    align-center
    append-to-body
    width="600px"
    @close="handleImportClose"
  >
    <!-- 滚动 -->
    <el-scrollbar max-height="60vh">
      <!-- 表单 -->
      <el-form
        ref="importFormRef"
        :model="importFormData"
        :rules="importFormRules"
        label-width="auto"
      >
        <el-form-item label="文件" prop="file">
          <el-upload
            ref="uploadRef"
            v-model:file-list="importFormData.files"
            :auto-upload="false"
            :limit="1"
            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
            class="full"
            drag
          >
            <el-icon class="el-icon--upload">
              <upload-filled />
            </el-icon>
            <div class="el-upload__text">
              将文件拖到此处，或
              <em>点击上传</em>
            </div>
            <template #tip>
              <div class="el-upload__tip">
                *.xlsx / *.xls
                <el-link
                  :icon="Download"
                  :underline="false"
                  type="primary"
                  @click="handleDownTem"
                >
                  下载{{ props.title }}导入模板
                </el-link>
              </div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
    </el-scrollbar>
    <!-- 弹窗底部操作按钮 -->
    <template #footer>
      <div>
        <el-button
          :disabled="importFormData.files.length === 0"
          type="primary"
          @click="handleImportSubmit"
        >
          确 定
        </el-button>
        <el-button @click="handleImportClose">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { Download, UploadFilled } from "@element-plus/icons-vue";
import { defineExpose, defineProps, reactive, ref } from "vue";
import { saveXlsx } from "@/util/FileUtil";
import {
  ElMessage,
  ElMessageBox,
  ElNotification,
  UploadUserFile,
} from "element-plus";

const props = defineProps<{
  downTel: () => Promise<any>;
  importFun: (file: File) => Promise<any>;
  title: string;
}>();

//下载模版
function handleDownTem() {
  if (props.downTel) {
    props.downTel().then((res) => {
      const fileData = res.data;
      const fileName = decodeURI(
        res.headers["content-disposition"].split(";")[1].split("=")[1]
      );
      // 下载文件
      saveXlsx(fileData, fileName);
    });
  }
}

//打开弹窗对象
const importVisible = ref(false);

//表单对象
const importFormRef = ref();
// 导入表单对象
const importFormData = reactive<{
  files: UploadUserFile[];
}>({
  files: [],
});
const importFormRules = ref({
  files: [{ required: true, message: "请选择文件" }],
});

//导入弹窗开启
function handleImportOpen() {
  if (importFormRef.value) {
    importFormRef.value.resetField;
  }
  importVisible.value = true;
}

//导入弹出关闭
function handleImportClose() {
  if (importVisible.value) {
    ElMessageBox.confirm("确定要关闭弹窗吗？")
      .then(() => {
        importVisible.value = false;
        importFormRef.value?.resetFields();
      })
      .catch(() => {
        //取消
      });
  }
}

// 导入确定
function handleImportSubmit() {
  importFormRef.value?.validate((valid: boolean) => {
    if (valid) {
      props.importFun(importFormData.files[0].raw as File).then((res) => {
        ElMessage.success("导入数据成功");
        ElNotification({
          title: "导入结果",
          dangerouslyUseHTMLString: true,
          duration: 0,
          message: res.data,
        });
        importVisible.value = false;
      });
    }
  });
}

//导出打开弹出函数
defineExpose({
  handleImportOpen,
});
</script>

<style scoped></style>
